<template>
  <div class="home_wrapper">
    <cardInfo/>
    <trendChart/>
    <tableInfo @showDetailPage="showDetailPage"/>
    <transition name="hehe">
      <div class="basic_info_wrapper" v-show="showDetailLayout">
        <detailInfo @closeDetailPage="closeDetailPage" :rowData="rowData"/>
      </div>
    </transition>
  </div>
</template>

<script>
import cardInfo from './components/cardInfo'
import trendChart from './components/trendChart'
import tableInfo from './components/tableInfo'
import detailInfo from './components/detailInfo'
export default {
  props: {},
  data () {
    return {
      showDetailLayout: false,
      rowData: {
        batchNo: '',
        createTime: '',
        errorCount: 0,
        execId: '',
        execTime: '',
        fixedWeight: 0,
        formulaId: '',
        formulaName: '',
        id: '',
        notFixedScore: 0,
        orgId: '',
        orgName: '',
        passTotal: 0,
        ruleId: '',
        ruleName: '',
        ruleScore: 0,
        ruleType: '',
        ruleWeight: 0,
        total: 0,
        valErrDataId: ''
      }
    }
  },
  components: {
    cardInfo,
    trendChart,
    tableInfo,
    detailInfo
  },
  computed: {},
  watch: {},
  methods: {
    showDetailPage (rowData) {
      console.log(rowData)
      this.showDetailLayout = true
      this.rowData = rowData
    },
    closeDetailPage () {
      this.showDetailLayout = false
    }
  },
  created () {},
  beforeMount () {},
  mounted () {},
  activated () {}
}
</script>

<style scoped lang="less">
.home_wrapper{
  position: relative;
  .basic_info_wrapper{
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    height: calc(100% - 14px);
    background-color: #ffffff;
    z-index: 999;
  }
  .hehe-enter,.hehe-leave-to{
      opacity: 0;
  }
  .hehe-enter-to,.hehe-leave{
      opacity: 1;
  }
  .hehe-enter-active,.hehe-leave-active{
      transition: all 300ms;
  }
}
</style>
